<!DOCTYPE html>
<html>

<head>
    <title>Prototype Chain Example</title>
</head>

<body>
    <h1>Prototype Chain Example</h1>
    <div id="output"></div>

    <script>
        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            greeting() {
                let message = `Hello, my name is ${this.name} and I am ${this.age} years old.`;
                console.log(message);
                return message;
            }
        }

        let person1 = new Person('Alice', 25);
        let person2 = new Person('Bob', 30);

        Person.prototype.goodbye = function() {
            let message = `Goodbye, ${this.name}!`;
            console.log(message);
            return message;
        };

        let outputDiv = document.getElementById('output');

        // 显示 person1 的信息
        let result1 = document.createElement('p');
        result1.textContent = `Person 1 - Name: ${person1.name}, Age: ${person1.age}`;
        outputDiv.appendChild(result1);

        let result1Greeting = document.createElement('p');
        result1Greeting.textContent = person1.greeting();
        outputDiv.appendChild(result1Greeting);

        let result1Goodbye = document.createElement('p');
        result1Goodbye.textContent = person1.goodbye();
        outputDiv.appendChild(result1Goodbye);

        // 显示 person2 的信息
        let result2 = document.createElement('p');
        result2.textContent = `Person 2 - Name: ${person2.name}, Age: ${person2.age}`;
        outputDiv.appendChild(result2);

        let result2Greeting = document.createElement('p');
        result2Greeting.textContent = person2.greeting();
        outputDiv.appendChild(result2Greeting);

        let result2Goodbye = document.createElement('p');
        result2Goodbye.textContent = person2.goodbye();
        outputDiv.appendChild(result2Goodbye);
    </script>
</body>

</html>